<script setup lang="ts">
import { useIntersectionObserver } from '@vueuse/core'
import { ref } from 'vue'

const target = ref<null | HTMLImageElement>(null)

// isIntersecting 是否到达科室区域
const { stop } = useIntersectionObserver(target, ([{ isIntersecting }]) => {
  console.log('1234', target, isIntersecting)
  if (isIntersecting) {
    // http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-22/a25d210a-cf3d-49f5-9006-5c1e7c563bb9.jpg
    target.value!.src =
      'http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-22/a25d210a-cf3d-49f5-9006-5c1e7c563bb9.jpg'
    stop()
  }
})
</script>

<template>
  <div class="playground-page">
    <h1>playground</h1>
    <XtxBread separator="!">
      <XtxBreadItem to="/">首页</XtxBreadItem>
      <XtxBreadItem>美食</XtxBreadItem>
      <XtxBreadItem>美食</XtxBreadItem>
    </XtxBread>

    <div>
      <div class="box"></div>
      <img ref="target" src="" alt="" />
    </div>
  </div>
</template>
<style scoped lang="scss">
.box {
  width: 200px;
  height: 2000px;
  background-color: pink;
}
</style>
